<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>收货地址</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../mui/hello-mui/css/mui.min.css">
    <!-- 扩展图标库 -->
    <link rel="stylesheet" href="../mui/hello-mui/css/icons-extra.css" type="text/css">
    <!-- de-css -->
    <link rel="stylesheet" href="../dece/css/de-css.css">

    <script src="../dece/js/app.js" type="text/javascript"></script>
    <script src="../dece/js/vue.js" type="text/javascript"></script>
    <script src="../dece/js/axios.min.js" type="text/javascript"></script>
    <!-- 引入饿了么样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入饿了么组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        .empty_address {
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: center;
        }
        .empty_address img {
            width: 120px;
            height: 120px;
            margin: 40px 0 20px 0;
        }
        .empty_address span {
            font-size: 19px;
            color: #999;
            margin: 0px;
        }
        /*新增收货地址按钮*/
        .add_address {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            position: fixed;
            bottom: 20px;
            width: 100%;
        }
        .add_address > button {
            width: 80%;
            color: #fff;
            font-size: 16px;
            border: 1px solid #f56c6c;
            background-color: #f56c6c;
            border-radius: 6px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-transparent">
            <a href="javascript:history.go(-1);" class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">收货地址</h1>
        </header>
        <div class="mui-content" style="margin-top: 44px;">
            <!-- 收货地址列表 -->
            <template v-if="address_list.length > 0">
                <div v-for="row in address_list" @click="add_address(row.id)" class="de-address">
                    <div class="de-address-img d-left">
                        <div></div>
                    </div>
                    <div class="de-address-row">
                        <div class="de-address-user"><span>收货人：{{row.truename}}<b v-if="row.stat == 1">默认</b></span><label>{{row.mobile}}</label></div>
                        <div class="de-address-addr">收货地址：山西省大同市灵丘县 {{row.detail}}</div>
                    </div>
                    <div class="de-address-img d-right">
                        <div></div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="empty_address">
                    <img src="../mui/img/empty_address.png">
                    <span>收货地址为空</span>
                </div>
            </template>
            <!-- 收货地址列表结束 -->
            <div class="add_address">
                <button @click="add_address(0)">新增收货地址</button>
            </div>
        </div>
    </div>
    <script src="../mui/hello-mui/js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#app",
            data: {
                api_host: de.api_host,
                address_list: [],
            },
            created: function (){
                // 验证是否登陆
                if (!de.auth_login()) {
                    de.href("../login.html");
                }
                this.address_index();
            },
            mounted: function (){

            },
            methods: {
                // 收货地址列表
                address_index: function (){
                    var the = this;
                    var login = de.auth_login();
                    // 提交数据
                    axios.post(de.address_index, {token:login}).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            the.address_list = dd.data;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                add_address: function ( id ){
                    var id = id != 0 ? '?id=' + id : '' ;
                    de.href('./add_address.html' + id);
                }
            },
        });
    </script>
</body>

</html>